<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            width: 3000px;
            height: 3000px;
        }

        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>

        /* 
            事件对象内的相关信息  鼠标相关 
            主要就是 坐标点 (x,y)

            四种 

            1. client一套 
                事件对象.clientX 距离浏览器左边框的距离 不管滚动条怎么动
                事件对象.clientY 距离浏览器上边框的距离 不管滚动条怎么动

            2. offset 一套 
                事件对象.offsetX 距离元素左边框的距离
                事件对象.offsetY 距离元素上边框的距离



            3. page 一套
                事件对象.pageX  pageX = clientX + 滚动条横向移动的距离
                事件对象.pageY  pageY = clientY + 滚动条纵向移动的距离

            4. screen一套
                事件对象.screenX  距离屏幕左侧的距离
                事件对象.screenY  距离屏幕上面的距离
        
        
        
        
        */

        var ele = document.querySelector('div');
        ele.onclick = function(e){
            e = window.event || e;
            // console.log(e);


            // offset一套 

            console.log('offetX',e.offsetX);
            console.log('offetY',e.offsetY);


             // client一套 

             console.log('clientX',e.clientX);
            console.log('clientY',e.clientY);


            // page一套 

            console.log('pageX',e.pageX);
            console.log('pageY',e.pageY);


            // screen一套 

            console.log('screenX',e.screenX);
            console.log('screenY',e.screenY);

        }

    </script>
</body>
</html>